<template>
	<view>
		<!-- 顶部导航栏 -->
		<u-navbar
			title="登录"
			:is-back="true"
			:title-bold="true"
			:background="background"
			title-color="#000"
			:border-bottom="false"
		></u-navbar>

		<view class="content_box">
			<view class="logo_box">
				<u-image width="160rpx" height="160rpx" :src="'logo.jpg' | ossName"></u-image>
			</view>
			<view class="btn_box">
				<button
					type="primary"
					class="login_btn"
					open-type="getPhoneNumber"
					@getphonenumber="loginBtn"
					:plain="false"
					shape="circle"
				>
					微信一键登录
				</button>
			</view>

			<view class="privacy_box">
				<u-checkbox-group>
					<u-checkbox v-model="checked" shape="circle" active-color="#ff9900">
						我已经阅读并同意
						<text style="color: #0f80ff" @click.stop="openPrivacy">《隐私协议》</text>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex'
import { userLogin } from '@/api/login'
import loginVue from './login.vue'

export default {
	data() {
		return {
			background: {
				backgroundColor: '#ff9900'
			},
			checked: false,
			loginCode: ''
		}
	},
	onLoad() {
		const value = uni.getStorageSync('token')
		if (!value) {
			this.getWxUserInfo()
		}
	},
	methods: {
		...mapActions('user', ['setUserInfo']),
		// 微信登录 + 获取用户信息
		getWxUserInfo() {
			uni.login({
				provider: 'weixin',
				success: (loginRes) => {
					this.loginCode = loginRes.code
				}
			}) 
		},
		async loginBtn(val) {
			if (this.checked === false) {
				this.showToast('请先勾选隐私协议')
				return
			}
			
			if (!val.detail.code) {
				this.showToast('请授权登录')
				return
			}

			const { token } = await userLogin({
				mobilePhoneCode: val.detail.code,
				jsCode: this.loginCode
			})
			this.setUserInfo(token)
			this.showToast('登录成功')
			uni.reLaunch({
				url: '/pages/index/index'
			})
		},
		openPrivacy() {
			uni.navigateTo({
				url: '/pages/viewView'
			})
		}
	} 
}
</script>

<style lang="less" scoped>
.content_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 185rpx;
}
.btn_box {
	margin-top: 90rpx;
}

.login_btn {
		width: 600rpx;
}

/deep/ .u-image image {
	border: 1px solid #bbb;
	border-radius: 40rpx !important;
}

.privacy_box {
	margin-top: 80rpx;
}
</style>
